<template>
  <div class="app-container">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-button type="primary" size="small" @click="addVis = true"
            >创建用户</el-button
          >
        </el-col>
      </el-row>
      <el-divider direction="horizontal" content-position="left"></el-divider>
      <el-table :data="list" border stripe>
        <el-table-column
          align="center"
          prop="username"
          label="用户名"
        ></el-table-column>

        <el-table-column align="center" label="角色">
          <template slot-scope="{ row }">
            <el-tag :type="row.is_staff ? 'danger' : 'warning'" size="mini">{{
              row.is_staff ? "超级管理员" : "普通成员"
            }}</el-tag>
          </template></el-table-column
        >
        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <!-- <el-button type="primary" size="small" @click="setUser(row.id)"
              >设置组</el-button
            > -->
            <el-button type="danger" size="small" @click="delUser(row.id)">删除</el-button>
            
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      title=""
      :visible.sync="setUserVis"
      width="50%"
      @closed="setList = []"
    >
      <el-select
        style="width: 100%"
        v-model="setList"
        multiple
        placeholder="请选择"
      >
        <el-option
          v-for="item in Options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>

      <span slot="footer">
        <el-button @click="setUserVis = false" size="small">取消</el-button>
        <el-button type="primary" @click="confirm()" size="small"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="" :visible.sync="addVis" width="50%" @closed="addform={is_staff:0}">
      <el-form
        :model="addform"
        ref="addform"
        label-width="80px"
        :inline="false"
        size="normal"
      >
        <el-form-item
          label="用户名"
          size="small"
          prop="username"
          :rules="[{ required: true }]"
        >
          <el-input v-model="addform.username"></el-input>
        </el-form-item>

        <el-form-item
          label="密码"
          size="small"
          prop="password"
          :rules="[{ required: true }]"
        >
          <el-input v-model="addform.password"></el-input>
        </el-form-item>
        <el-form-item
          label="身份"
          size="small"
          prop="is_staff"
          :rules="[{ required: true }]"
        >
          <el-switch
            v-model="addform.is_staff"
            active-color="#ff4949"
            inactive-color="#13ce66"
            active-text="超级管理员"
            inactive-text="普通成员"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="addVis = false" size="small">取消</el-button>
        <el-button type="primary" @click="addUser()" size="small"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getUser, setGroup, getUserById, addUser,delUser } from "@/api/common_user";
import { getGroup } from "@/api/group";
import md5 from "js-md5";
export default {
  data() {
    return {
      list: [],
      setUserVis: false,
      addVis: false,
      setList: [],
      setId: null,
      Options: [],
      addform: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getUser().then((res) => {
        this.list = res;
      });
    },
    setUser(id) {
      this.setUserVis = true;
      this.setId = id;
      this.Options.length == 0
        ? getGroup().then((res) => {
            res.map((i) => {
              let o = {
                label: i.name,
                value: i.id,
              };
              this.Options.push(o);
            });
          })
        : null;
      getUserById(id).then((res) => {
        this.setList = res.groups;
      });
    },
    confirm() {
      setGroup(this.setId, { list: this.setList }).then((res) => {
        this.setUserVis = false;
      });
    },
    addUser() {
      this.$refs.addform.validate((res) => {
        if (res) {
          this.addVis = false;
          this.addform.password = md5(this.addform.password);
          addUser(this.addform).then((res) => {
            this.getList();
          });
        }
      });
    },
    delUser(id){
      delUser(id).then(res=>{
        this.getList()
        this.$message.success('删除成功')
      })
    }
  },
};
</script>

<style>
</style>